<template>
	<view>
		<view class="positioningbox">
			<view class="uni-margin-wrap">
				<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="2000"
					:duration="500">
					<swiper-item class="swiper-item" v-for="(item, index) in imgbox" :key="index" @click="tourl(item)">
						<image :src="getImage(item.img)"></image>
					</swiper-item>
				</swiper>
			</view>
			<view class="searcherbox">
				<view class="input">
					<view class="imgbox">
						<image src="../../static/ss.png"></image>
					</view>
					<input v-model="keyword" maxlength="35" placeholder="搜索名称" />
					<view class="but" @click="ss()"> 搜索 </view>
				</view>
			</view>
			<view class="filter">
				<view :style="{ color: filterParam.address ? '#ff6178' : '' }" class="filter-item"
					@click="openFilter('address')">社区<uni-icons :type="filterShow.address ? 'top' : 'bottom'" size="16"
						:color="filterParam.address ? '#ff6178' : ''" /></view>
				<view :style="{ color: filterParam.time ? '#ff6178' : '' }" class="filter-item"
					@click="openFilter('time')">
					开课时间<uni-icons :type="filterShow.time ? 'top' : 'bottom'" size="16"
						:color="filterParam.time ? '#ff6178' : ''" /></view>
				<view :style="{ color: filterParam.cate ? '#ff6178' : '' }" class="filter-item"
					@click="openFilter('cate')">
					课程分类<uni-icons :type="filterShow.cate ? 'top' : 'bottom'" size="16"
						:color="filterParam.cate ? '#ff6178' : ''" /></view>
			</view>
			<modal :show="filterShow.address">
				<vAddress @select="setAddress"></vAddress>
			</modal>
			<modal :show="filterShow.time">
				<vTime @select="setTime"></vTime>
			</modal>
			<modal :show="filterShow.cate">
				<vCate @select="setCate"></vCate>
			</modal>
			<!-- <view class="navtit">
				<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll">
					<view class="swiperbox">
						<view class="scroll-view-item_H" v-for="(item, index) in catelist" :key="index" @click="changecate(item, index)">
							<view :style="{ color: index == navindex ? '#FF6178' : '', 'border-bottom': index == navindex ? 'solid 2rpx #FF6178' : 'solid 2rpx #FFF' }">
								{{ item.name }}
							</view>
						</view>
					</view>
				</scroll-view>
			</view> -->
		</view>

		<goods v-if="list.length > 0" :list="list" @togoodsinfo="togoodsinfo"></goods>
		<kong v-if="list.length == 0"></kong>
		<!-- 顶部弹窗 -->
		<uni-popup ref="popup" type="right" background-color="#F7F7F7">
			<!-- <view style="height: 84rpx;"></view> -->
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scroll="scroll">
				<view v-for="(item, index) in childrenlist" :key="index" class="scroll-view-item"
					v-if="community == false">
					<view class="titlebox">
						{{ item.name }}
					</view>
					<view class="boxitem">
						<view class="itembox" v-for="(sitem, sindex) in item.child" :key="sindex"
							@click="changebx(sitem, sindex)"
							:style="{ color: sitem.id == snavindex ? '#FFF' : '', border: sitem.id == snavindex ? '2rpx solid #FF8A9B' : '', background: sitem.id == snavindex ? ' #FF8A9B' : '' }">
							{{ sitem.name }}
						</view>
					</view>
				</view>
				<kong v-if="community == false && childrenlist.length == 0"></kong>
				<view class="listbox" v-if="community == true && comlist.length > 0">
					<view class="listitem" v-for="(item, index) in comlist" :key="index"
						@click="changeitem(index, item)"
						:style="{ background: currone == index ? '#FF8A9B' : '', color: currone == index ? '#FFF' : '' }">
						<view>{{ item.name }}</view>
					</view>
				</view>
				<kong v-if="community == true && comlist.length == 0"></kong>
			</scroll-view>
			<view class="navbut">
				<view class="but">
					<view @click="reset()"
						style="color: #ff6178; background-color: #fff; border-radius: 42rpx 0rpx 42rpx 42rpx">重置</view>
					<view @click="sure()">确定</view>
				</view>
			</view>
			<!-- <view class="tiptype" v-for="(item,index) in childrenlist" :key="index">
				<view>1</view>
				<view class="boxitem">
					<view class="itembox" v-for="(item,index) in childrenlist" :key="index" @click="changebx(item,index)"
						:style="{'color':index==navindex?'#FFF':'','border':index==navindex?'2rpx solid #FF8A9B':'','background':index==navindex?' #FF8A9B':''}">
						{{item.name}}
					</view>
				</view>
			</view> -->
		</uni-popup>
	</view>
</template>

<script>
	import goods from "../../components/goods.vue"
	import kong from "../../components/kong.vue"
	import modal from "./components/modal.vue"
	import vAddress from "./components/address.vue"
	import vTime from './components/time.vue'
	import vCate from './components/cate.vue'
	export default {
		components: {
			goods,
			kong,
			modal,
			vAddress,
			vTime,
			vCate
		},
		data() {
			return {
				scrollTop: 0,
				old: {
					scrollTop: 0,
				},
				catelist: ["精选", "数学", "物理", "化学", "英语", "语文"],
				navindex: null,
				popupindex: true,
				page: 1,
				list: [],
				childrenlist: [],
				snavindex: null,
				cate_id: "",
				is_data: true,
				imgbox: [],
				keyword: "",
				address: uni.getStorageSync("address") || {},
				community: false,
				comlist: [],
				currone: 0,
				filterShow: {
					address: false,
					time: false,
					cate: false
				},
				filterParam: {
					time: '',
					cate: '',
					address: ''
				},
			}
		},
		onLoad() {
			this.getcatelist()
			this.getlist()
			this.getimg()
			// this.getcommunity()
			if (!this.address.name) {
				this.getplace()
			}
		},
		onReachBottom() {
			this.is_data && this.getlist()
		},
		methods: {
			getImage(url) {
				if(!url)return ''
				if (url.indexOf(',') == -1) {
					return url
				}else{
					return url.split(',')[0]
				}
			},
			init() {
				this.page = 1
				this.list = []
				this.getlist()
			},
			setAddress(e) {
				this.filterParam.address = e
				this.filterParam.address = e
				this.filterShow.address = false
				this.init()
			},
			setTime(e) {
				this.filterParam.time = e
				this.filterShow.time = false
				this.init()
			},
			setCate(e) {
				this.filterParam.cate = e[e.length - 1]
				this.filterShow.cate = false
				this.init()
			},
			openFilter(type) {
				Object.keys(this.filterShow).forEach((item) => {
					if (item == type) {
						this.filterShow[item] = !this.filterShow[item]
					} else {
						this.filterShow[item] = false
					}
				})
			},
			getplace() {
				let that = this
				uni.getLocation({
					type: "wgs84",
					success: function(res) {
						console.log("当前位置的经度：" + res.longitude)
						console.log("当前位置的纬度：" + res.latitude)
						// that.longitude = res.longitude
						// that.latitude = res.latitude
						// console.log(that.longitude,that.latitude,'123')
						that.getcommunitys(res.longitude, res.latitude)
					},
				})
				// this.getcommunity(this.longitude, this.latitude)
			},
			getcommunitys(longitude, latitude) {
				console.log("getcommunity")
				this.$http({
					url: "/api/Activity/community_list",
					data: {
						lat: latitude || "",
						long: longitude || "",
						limit: 99999,
						page: 1
					},
				}).then((res) => {
					this.address = res.data[0]
				})
			},
			getcommunity() {
				this.$http({
					url: "/api/Activity/community",
					data: {
						limit: 99999,
						page: 1
					}
				}).then((res) => {
					this.comlist = res.data
					this.comlist.unshift({
						id: "",
						name: "全部社区",
						status: 1
					})
				})
			},
			changeitem(index, item) {
				this.currone = index
				this.address = item
				// this.page = 1
				// this.list = []
				// this.getlist()
			},
			scroll: function(e) {
				// console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			//跳课程详情
			togoodsinfo(result) {
				const info = JSON.parse(JSON.stringify(result))
				uni.navigateTo({
					url: "/pages/coursesinfo/coursesinfo?id=" + info.id,
				})
			},
			//选择分类
			changecate(item, index) {
				this.navindex = index
				if (index == 0) {
					this.community = true
				} else {
					this.currone = ""
					this.community = false
					this.childrenlist = this.catelist[this.navindex].child
				}
				this.open()
			},
			open() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open("right")
				this.popupindex = false
			},
			//重置
			reset() {
				this.snavindex = null
				this.currone = null
			},
			sure() {
				this.page = 1
				this.list = []
				this.address = this.comlist[this.currone]
				// if(this.currone)
				// this.catelist.splice(0,1)
				if (this.community == true) {
					this.catelist[0] = {
						name: this.address.name || "选择社区"
					}
				}
				this.close()
				this.getlist()
			},
			close() {
				this.$refs.popup.close()
				this.popupindex = true
			},
			changebx(sitem, sindex) {
				this.snavindex = sitem.id
				console.log(sitem, "item")
				this.cate_id = sitem.id
			},
			//课程分类
			getcatelist() {
				this.$http({
					url: "/api/Course/course_cate",
				}).then((res) => {
					this.catelist = res.data
					this.catelist.unshift({
						name: this.address.name || "选择社区"
					})
					console.log(uni.getStorageSync("address"), 123)
				})
			},
			//课程列表
			getlist() {
				this.$http({
					url: "/api/Course/index",
					data: {
						limit: 20,
						cate_id: this.filterParam.cate ? this.filterParam.cate : this.cate_id || "",
						community_id: this.filterParam.address ? this.filterParam.address.id : this.currone ? this
							.comlist[this.currone].id : "",
						page: this.page,
						is_jx: 1,
						keyword: this.keyword,
						time: this.filterParam.time ? [this.filterParam.time[0], this.filterParam.time[1]] : ''
					},
				}).then((res) => {
					if (res.data.length) {
						this.page++
						this.list.push(...res.data)
						return
					}
					this.is_data = false
				})
			},
			ss() {
				this.page = 1
				this.list = []
				this.getlist()
			},
			//获取轮播图
			getimg() {
				this.$http({
					url: "/api/Activity/banner_list",
					data: {
						type: 3, //1首页轮播图2商城轮播图3课程轮播图4活动轮播图5老师轮播图 6新闻中心
					},
				}).then((res) => {
					this.imgbox = res.data
				})
			},
			tourl(item) {
				console.log(item.url)
				// console.log(item.url)
				if (item.url) {
					uni.navigateTo({
						url: item.url,
					})
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.positioningbox {
		position: sticky;
		top: 0;
		z-index: 9;
		width: 750rpx;
		background-color: #fff;

		.uni-margin-wrap {
			width: 750rpx;
			height: 300rpx;

			.swiper {
				height: 300rpx;

				.swiper-item {
					display: block;
					height: 300rpx;
					line-height: 300rpx;
					text-align: center;

					image {
						height: 300rpx;
						width: 100%;
					}
				}
			}
		}

		.searcherbox {
			width: 690rpx;
			padding: 0 30rpx;
			background-color: #fff;

			.input {
				width: 690rpx;
				height: 70rpx;
				background: #ffffff;
				border-radius: 36rpx;
				opacity: 1;
				border: 2rpx solid #e2e2e2;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 35rpx;

				.imgbox {
					width: 74rpx;
					text-align: center;

					image {
						width: 33rpx;
						height: 28rpx;
					}
				}

				>input {
					width: 500rpx;
					line-height: 70rpx;
					font-size: 28rpx;
				}

				.but {
					width: 112rpx;
					height: 70rpx;
					background: #ff8a9b;
					border-radius: 36rpx;
					font-size: 28rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #f7f7f7;
					text-align: center;
					line-height: 70rpx;
				}
			}
		}

		.navtit {
			width: 750rpx;
			height: 84rpx;
			background: #ffffff;
			display: flex;
			align-items: center;

			.scroll-view_H {
				white-space: nowrap;
				width: 750rpx;

				.scroll-view-item_H {
					display: inline-block;
					width: fit-content;
					height: 84rpx;
					line-height: 84rpx;
					text-align: center;
					font-size: 36rpx;
					padding: 0 15rpx;
					font-size: 32rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #222222;
					border-bottom: solid 2rpx #fff;
				}
			}

			.openbox {
				width: 72rpx;
				height: 84rpx;
				background: #ffffff;
				text-align: center;
				line-height: 84rpx;

				image {
					width: 27rpx;
					height: 15rpx;
				}
			}
		}
	}

	.scroll-Y {
		height: 80vh;
		background-color: #f7f7f7;
		width: 570rpx;

		// padding-top: 84rpx;
		.scroll-view-item {
			background-color: #fff;
			// height: 300rpx;
			width: 514rpx;
			padding: 0 28rpx;
			font-size: 32rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #222222;
			margin-bottom: 20rpx;

			.titlebox {
				height: 112rpx;
				line-height: 112rpx;
			}

			.boxitem {
				display: flex;
				flex-wrap: wrap;
				width: 570rpx;

				// padding: 40rpx 30rpx;

				.itembox {
					height: 72rpx;
					border-radius: 40rpx;
					border: 2rpx solid #999999;
					line-height: 72rpx;
					width: fit-content;
					padding: 0 50rpx;
					margin-right: 24rpx;
					margin-bottom: 20rpx;
				}
			}
		}

		.listbox {
			display: flex;
			flex-wrap: wrap;
			width: 570rpx;
			margin: 40rpx auto 0 auto;

			.listitem {
				width: fit-content;
				height: 74rpx;
				background: #fff6f8;
				border-radius: 38rpx;
				padding: 0 35rpx;
				line-height: 74rpx;
				margin-right: 24rpx;
				margin-bottom: 20rpx;
				margin-left: 10rpx;
				font-size: 28rpx;
			}

			// .listitem:last-child {
			// 	margin-bottom: 20rpx;
			// 	margin-right: 0;
			// }
		}
	}

	.navbut {
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: #f7f7f7;
		height: 90rpx;
		z-index: 999;

		.but {
			width: 510rpx;
			height: 84rpx;
			background: #ff8a9b;
			border-radius: 42rpx;
			opacity: 1;
			border: 2rpx solid #ff8a9b;
			display: flex;
			align-items: center;
			margin: 0 auto;
			font-size: 28rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #ffffff;

			>view {
				width: 255rpx;
				text-align: center;
				line-height: 84rpx;
				border-radius: 42rpx;
			}
		}
	}

	.filter {
		display: flex;
		background: white;
		margin-top: 20rpx;

		.filter-item {
			flex: 1;
			text-align: center;
			height: 88rpx;
			line-height: 88rpx;
			border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
		}
	}

	.tiptype {
		width: 570rpx;
		padding-top: 84rpx;
		background-color: #f7f7f7;

		.boxitem {
			display: flex;
			flex-wrap: wrap;
			width: 570rpx;

			// padding: 40rpx 30rpx;

			.itembox {
				height: 72rpx;
				border-radius: 40rpx;
				border: 2rpx solid #999999;
				line-height: 72rpx;
				width: fit-content;
				padding: 0 50rpx;
				margin-right: 24rpx;
				margin-bottom: 20rpx;
			}
		}
	}
</style>